<template>
  <div class="aside">
    <el-menu 
    default-active="/" 
    class="el-menu-vertical-demo" 
    @open="handleOpen" 
    @close="handleClose" 
    :collapse="isCollapse"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    >
      <h3>{{title}}</h3>
      <el-menu-item :index="item.path" v-for="item in nochildren" :key="item.path" @click="changeMenu(item)">
        <i :class="`el-icon-${item.icon}`"></i>
        <span slot="title">{{item.label}}</span>
      </el-menu-item>
      <el-submenu index="other" v-for="(item,index) in haschildren" :key="index">
        <template slot="title">
          <i :class="`el-icon-${item.icon}`"></i>
          <span slot="title">{{item.label}}</span>
        </template> 
        <el-menu-item :index="child.path" v-for="child in item.children" :key="child.path" @click="changeMenu(child)">
          <i :class="`el-icon-${child.icon}`"></i>
          <span>{{child.label}}</span>
        </el-menu-item>
      </el-submenu>  
    </el-menu>
  </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
    name: 'Aside',
    computed:{
      nochildren(){
        return this.menuList.filter(item => !item.children)
      },
      haschildren(){
        return this.menuList.filter(item => item.children)
      },
      ...mapState('asideOptions',['isCollapse']),
      ...mapGetters('asideOptions',['title']),
      ...mapState('asideOptions',{menuList:'menu'})
    },
    data(){
      return {
        
      }
    },
    methods:{
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      // 切换菜单
      changeMenu(item){
        // 往Vuex添加面包屑数据
        this.$store.dispatch('tagOptions/addTag',item)
        // 切换路由
        this.$router.push({
          name: item.name
        })
      }
    }
}
</script>

<style lang="less" scoped>
.aside{
  height: 100%;
}
.el-menu{
  height: 100%;
  border: 0;
  h3{
    text-align:center;
    color:#fff;
    height: 42px;
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
    height: 100%;
}
</style>